lit-element

What is lit-element?

The lit-element package is a simple base class for creating fast, lightweight web components with the Lit library. It provides a declarative template system that ties your markup to your component's properties and state, along with reactive updates and a component lifecycle.

What are lit-element's main functionalities?

Declarative Templates

LitElement uses `html` tagged template literals to define templates that are bound to the component's properties. When properties change, the template is efficiently re-rendered.

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {
  static get properties() {
    return {
      message: { type: String }
    };
  }

  constructor() {
    super();
    this.message = 'Hello, World!';
  }

  render() {
    return html`<p>${this.message}</p>`;
  }
}
customElements.define('my-element', MyElement);

Reactive Properties

Properties can be made reactive using the `@property` decorator. When a reactive property changes, LitElement automatically updates the component's template.

import { LitElement, html, property } from 'lit-element';

class MyElement extends LitElement {
  @property({ type: String }) greeting = 'Hello';

  render() {
    return html`<h1>${this.greeting}, World!</h1>`;
  }
}
customElements.define('my-element', MyElement);

Lifecycle Methods

LitElement provides lifecycle methods such as `firstUpdated`, `updated`, and `disconnectedCallback` for managing the component's lifecycle events.

import { LitElement } from 'lit-element';

class MyElement extends LitElement {
  firstUpdated(changedProperties) {
    console.log('Component first updated!');
  }

  updated(changedProperties) {
    console.log('Component updated with changed properties:', changedProperties);
  }

  disconnectedCallback() {
    console.log('Component removed from the DOM!');
  }
}
customElements.define('my-element', MyElement);

Other packages similar to lit-element

react

React is a popular library for building user interfaces. It uses a virtual DOM for efficient updates, which is different from LitElement's direct DOM manipulation. React components are typically more verbose and use JSX for templating.

vue

Vue is a progressive framework for building UIs. Like LitElement, it offers a reactive and composable data model. Vue uses a virtual DOM similar to React and has a more opinionated structure, including a focus on single-file components.

svelte

Svelte is a compiler that generates efficient JavaScript code for creating web components. Unlike LitElement, which updates the DOM in response to property changes, Svelte compiles components to update the DOM directly, which can result in better performance for some applications.

stencil

Stencil is a compiler that generates web components with a focus on performance and compatibility. It provides a set of features similar to LitElement but includes a virtual DOM and TypeScript support out of the box.

README

LitElement 3.0

A simple base class for creating fast, lightweight web components.

LitElement is the base class that powers the Lit library for building fast web components. Most users should import LitElement from the lit package rather than installing and importing from the lit-element package directly.

About this release

This is a stable release of lit-element 3.0.0 (part of the Lit 2.0 release). If upgrading from previous versions of lit-element, please see the Upgrade Guide for a step-by-step guide on upgrading.

Documentation

Full documentation is available at lit.dev.

Contributing

Please see CONTRIBUTING.md.